<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>体育器材租赁系统</title>
    <div th:replace="~{fragments/common/common :: common-styles}"></div>
</head>
<body>
<!-- 顶部区域 -->
<div th:replace="~{fragments/common/header :: hearder}"></div>
<!--banner区域-->
<div th:replace="~{fragments/common/banner :: banner-section}"></div>
<!--分类筛选区域-->
<div th:replace="~{fragments/common/category :: category-section}"></div>
<!-- 列表展示区域 展示器材列表信息-->
<div th:replace="~{fragments/equipment-list :: equipment-list-section}"></div>
<!--器材详情-->
<!--个人中心弹窗-->
<div th:replace="~{fragments/common/user-center-modal :: user-center-modal}"></div>
<!-- 在页面底部添加全局提示弹窗 -->
<div class="alert-container" id="alertContainer"></div>
<!-- 器材详情 -->
<div th:replace="~{fragments/equipment-details :: equipment-details-drawer}"></div>
<!-- 购物车按钮 -->
<div th:replace="~{fragments/cart-button :: cart-button}"></div>
<!-- 引入公告弹窗片段 -->
<div th:replace="~{fragments/notice-modal :: notice-modal}"></div>
<!-- 订单列表 -->
<div th:replace="~{fragments/order-list :: order-list}"></div>

<!-- 订单详情弹窗 -->
<div th:replace="~{fragments/order-details :: order-details}"></div>

<!-- 购物车抽屉 -->
<div th:replace="~{fragments/cart-drawer :: cart-drawer}"></div>
<!--支付弹窗-->
<div th:replace="~{fragments/payment-modal :: payment-modal}"></div>

<!--底部区域-->
<div th:replace="~{fragments/common/common :: footer}"></div>
<!-- 脚本引入 -->
<!-- 脚本统一管理 -->
<div th:replace="~{fragments/common/common :: common-scripts}"></div>
<!-- 在body底部添加 -->
<div th:replace="~{fragments/common/mask-layer :: mask-layer}"></div>
</body>
</html>